<template>
  <el-dialog :title="title"
    :visible.sync="dialogFormVisible"
  >
    <el-form ref="dataForm" 
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
    >
        <el-form-item :label="类型名称" prop="typename">
            <el-input v-model="temp.typename" />
        </el-form-item>
        <el-form-item :label="类型图片" prop="typeimg">
            <el-upload 
                class="upload-demo"
                :action="imageAction"
                :on-preview="handlePreview"
                multiple
                limit="1"
                :on-exceed="handleExceed"
            >
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">
                取消
            </el-button>
            <el-button type="primary" @click="title==='新建类型'?createData():updateData()">
                提交
            </el-button>
        </div>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
    name:'TypeDialog',
    props:{
        title:String,
        dialogFormVisible:Boolean,
        imageAction:String,


    },
    data(){
        const validateTypeName = (rule,value,callback) =>{
            if(!value){
                 callback(new Error('类型不允许为空'));
            }else{
                callback()
            }
        }
        return{
            temp:{
                typename:''
            },
            file:'',
            rules:{
                typename
            }
        }
    },
    methods:{
        handlePreview(file){
           this.file = file;
        },

        createData(){
            let typeName = this.temp.typename
            this.$emit('createData',{typeName,file})
        },
        updateData(){
             let typeName = this.temp.typename
             this.$emit('createData',{typeName,file})
        },
        handleExceed(){
            this.$message.warning('只允许上传一个图片文件')
        }
    }
}
</script>

<style>

</style>